import React, { Component } from 'react'
import "./movieDetail.css"
import {withRouter} from "react-router-dom"
import axios from "axios"

class movieDetail extends Component {
    componentDidMount(){
    let {movieId} = this.props.match.params
        axios.get(`ajax/detailmovie?movieId=${movieId}`).then(res=>{
            console.log(res.data.detailMovie.star)
            this.setState({
                info_con:res.data.detailMovie,
                movieImg:res.data.detailMovie.img,
                bgColor:res.data.detailMovie.backgroundColor,
                // namelist:res.data.detailMovie.star.split(',')
                score:res.data.detailMovie.distributions,
                text:res.data.detailMovie.shareInfo.content,
                photosList:res.data.detailMovie.photos,
                // w1:sz[0].proportion
            })
        })
    }
    state = {
        info_con:[],
        movieImg:'',
        bgColor:'',
        namelist:[],
        score:[],
        text:"",
        photosList:[],
        w1:""
    }
    render() {
        return (
            <div className="movie-page" style={{backgroundColor:`${this.state.bgColor}`}}>
                <div className="movie-info">
                    <div className="crumbs-nav">
                        <a href="#">猫眼电影</a>
                        &nbsp;&gt;&nbsp;
                        <span>{this.state.info_con.nm}</span>
                    </div>
                    <div className="movie-info-top">
                        <div className="movie-cover">
                            <img className="movie-bg" src={this.state.movieImg.replace('/w.h','')} alt=""/>
                            <img className="movie-play" src="https://s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/poster-play.png" alt=""/>
                        </div>
                        <div className="movie-desc">
                            <div className="movie-desc-top">
                                <div className="movie-cn-name">
                                    <h1>{this.state.info_con.nm}</h1>
                                </div>
                                <div className="movie-en-name1">{this.state.info_con.enm}</div>
                                <div className="movie-other-info">
                                    <div className="movie-type">
                                        <span className="movie-cat">{this.state.info_con.cat}</span>
                                        <span className="movie-tag">
                                            <img src="https://s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/movie-tag-2DIMAX.png" alt=""/>
                                        </span>
                                    </div>
                                    <div className="actors">
                                        {/* <a href="#">约翰·大卫·华盛顿&nbsp;/&nbsp;</a>
                                        <a href="#">罗伯特·帕丁森&nbsp;/&nbsp;</a>
                                        <a href="#">伊丽莎白·德比茨基</a> */}
                                        {
                                            this.state.info_con.star?
                                            this.state.info_con.star.split(',').map((v,i)=>
                                                <a href="#" key={i}>{v}&nbsp;/&nbsp;</a>
                                                
                                            )
                                            :
                                            ""
                                        }
                                    </div>
                                    <div className="movie-show-time">
                                        <span>{this.state.info_con.pubDesc}</span>
                                        <img src="https://s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/arrow-right.png" alt=""/>
                                    </div>
                                </div>
                            </div>
                            <div className="btns">
                                <a className="btns-left">
                                    <img src="https://s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/want-to-watch.png" alt=""/>
                                    <span>想看</span>
                                </a>
                                <a className="btns-right">
                                    <img src="https://s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/star.png" alt=""/>
                                    <span>看过</span>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div className="real-time-word-of-mouth">
                        <div className="wom-top">
                            <div className="wom-top-left">
                                <img src="https://s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/logo.png" alt=""/>
                                <span>实时口碑</span>
                            </div>
                            <div className="wom-top-right">
                                    <span className="num">{this.state.info_con.wish}</span>
                                <span>人想看</span>
                                <span className="num watched">{this.state.info_con.watched}</span>
                                <span>人想看</span>
                            </div>
                        </div>
                        <div className="wom-middle">
                            <div className="wom-middle-left">
                                <span className="score">{this.state.info_con.sc}</span>
                                <span className="people-grade">
                                    <span>{this.state.info_con.snum}</span>
                                    <span>人评</span>
                                </span>
                            </div>
                            <div className="wom-middle-right">
                                <div className="stars-percent-bar">
                                    <div className="stars">9-10分</div>
                                    <div className="bar">
                                        <div className="percent" style={{width:'61.9%'}}></div>
                                    </div>
                                    <div className="percent-value">
                                        <span>61.9</span>
                                        <span>%</span>
                                    </div>
                                </div>
                                <div className="stars-percent-bar">
                                    <div className="stars">5-8分</div>
                                    <div className="bar">
                                        <div className="percent" style={{width:'30.23%'}}></div>
                                    </div>
                                    <div className="percent-value">
                                        <span>30.23</span>
                                        <span>%</span>
                                    </div>
                                </div>
                                <div className="stars-percent-bar">
                                    <div className="stars">1-4分</div>
                                    <div className="bar">
                                        <div className="percent" style={{width:'7.83%'}}></div>
                                    </div>
                                    <div className="percent-value">
                                        <span>7.83</span>
                                        <span>%</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className="brief-introduction">
                        <div className="title">
                            <span>简介</span>
                            <div>
                                <button type="button" className="open">
                                    <span>展开</span>
                                    <img src="https://s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/arrow-right.png" alt=""/>
                                </button>
                            </div>
                        </div>
                        <div className="content">
                            <p className="line-clamp">
                                {this.state.text}
                            </p>
                        </div>
                    </div>
                    <div className="videos">
                        <div className="title">
                            <span>视频推荐</span>
                            <a href="#" className="go-to-all">
                                    全部<span>{this.state.info_con.vnum}</span>个
                                <img src="https://s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/arrow-right.png" alt=""/>
                            </a>
                        </div>
                        <div className="videos-list">
                            <ul>
                                <li className="video">
                                    <a href={this.state.info_con.videourl}>
                                        <img src={this.state.info_con.videoImg} alt=""/>
                                        <div className="play">
                                            <div className="triangle"></div>
                                        </div>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div className="photos">
                        <div className="title">
                            <span>剧照</span>
                            <a href="#" className="go-to-all">
                                全部<span>20</span>张
                                <img src="https://s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/arrow-right.png" alt=""/>
                            </a>
                        </div>
                        <div className="photos-list">
                            <ul>
                                {/* <li className="photos-item">
                                    <a href="#">
                                        <img src="https://p1.meituan.net/movie/285c5b298a417563e795a47927861615265987.jpg@420w_279h_1e_1c" alt=""/>
                                    </a>
                                </li> */}
                                {
                                this.state.photosList.map((v,i)=>
                                        <li className="photos-item" key={i}>
                                            <a href="#">
                                                <img src={v.replace('/w.h','')} alt=""/>
                                            </a>
                                        </li>
                                )
                            }
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

export default withRouter(movieDetail)

 